<template>
  <div class="mainContainer">
    <div class="detailContainer">
      <div class="detailAll">
        <!-- 左侧图展示 -->
        <div class="imgShow">
          <!-- 左侧小图 -->
          <ul class="small">
            <li
              :class="{ active: changeId === index }"
              v-for="(smallImg, index) in produce.productImageSmall"
              :key="index"
              @click="changeId = index"
            >
              <img :src="smallImg" alt="" />
            </li>
          </ul>
          <!-- 大图 -->
          <div
            class="bigImage"
            v-for="(smallImg, index) in produce.productImageSmall"
            :key="index"
          >
            <img :src="smallImg" v-if="changeId === index" />
          </div>
        </div>
        <!-- 右侧信息 -->
        <div class="rightInfo">
          <!-- 头部信息 -->
          <div class="titleInfo">
            <h4>{{ produce.productName }}</h4>
            <h6>
              <span class="title">{{ produce.subTitle }}</span>
              <span class="price">￥{{ totalPrice }} 元</span>
            </h6>
          </div>
          <!-- 数量 -->
          <div class="count">
            <span>数量</span>
            <div class="updown">
              <span class="plus" @click="updataNum(1)">+</span>
              <input v-model="Num" @blur="Num = $event.target.value * 1" />
              <span class="down" @click="updataNum(-1)">-</span>
            </div>
          </div>
          <!-- 加入购物车和去购买 -->
          <div class="buy">
            <button class="cartbtn" @click="addShopCart">加入购物车</button>
            <button class="paybtn" @click="toPay">去购买</button>
          </div>
        </div>
      </div>
    </div>
    <div class="itemContainer">
      <div class="itemInfo">
        <div class="itemTitle">商品信息</div>
        <div class="itemImg">
          <img
            :src="produce.detail"
            alt=""
            style="width: 1220px;height: 13000px;"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Detail',
  data() {
    return {
      goodsId: '', //商品Id
      changeId: 0, //左侧小图索引
      Num: 1,
    }
  },
  beforeMount() {
    this.goodsId = this.$route.params.goodsId
  },
  mounted() {
    this.getDetailData()
  },
  methods: {
    // 初始化请求数据
    getDetailData() {
      this.$store.dispatch('getDetailData', this.goodsId)
    },
    // 点击加减数据
    updataNum(date) {
      // 判断输入的值是否为数字  并且不为负数
      var data = date * 1
      if (isNaN(this.Num)) {
        this.Num = 1
        return
      }
      this.Num += data
      if (this.Num < 1) {
        this.Num = 1
      }
    },
    // 点击提交订单
    toPay() {
      this.$router.push({
        name: 'pay',
        query: {
          goodsId: this.goodsId,
          num: this.Num,
          totalPrice: this.totalPrice,
        },
      })
    },
    //添加购物车
    addShopCart() {
      this.$store.dispatch('addOrUpdateShopCart', {
        productId: this.goodsId,
        productNum: this.Num,
      })
      this.$router.push({
        name: 'shopcart',
        params: {
          userId: '3144',
          productId: this.goodsId,
          productNum: this.Num,
        },
      })
    },
  },
  computed: {
    ...mapState({
      produce: (state) => state.detail.detail,
    }),
    totalPrice() {
      return this.produce.salePrice * this.Num
    },
  },
}
</script>

<style lang="less" scoped>
.mainContainer {
  .detailContainer {
    width: 1220px;
    margin: 20px auto 0;
    border-radius: 10px;
    background-color: #fff;
    /*  */
    .detailAll {
      width: 1220px;

      height: 520px;
      padding: 60px;
      display: flex;
      /* 左侧图片展示 */
      .imgShow {
        width: 540px;
        height: 440px;
        // background-color: antiquewhite;
        display: flex;
        .small li {
          width: 80px;
          height: 80px;
          margin-top: 10px;
          border: 1px solid #f0f0f0;
          border: 1px solid rgba(0, 0, 0, 0.06);
          border-radius: 5px;
          cursor: pointer;
          list-style-type: none;
          text-align: center;
          vertical-align: middle;
          &.active {
            border: 3px solid #ccc;
            border: 3px solid rgba(0, 0, 0, 0.2);
          }
          img {
            margin-top: 10px;
            width: 60px;
            height: 60px;
          }
        }
        .bigImage img {
          width: 460x;
          height: 440px;
        }
      }
      /* 右侧 */
      .rightInfo {
        width: 450px;
        height: 440px;
        // background-color: aqua;
        margin-left: 10px;
        padding: 20px;
        /* 头部 */
        .titleInfo {
          border-bottom: 1px solid #ededee;
          h4 {
            font-size: 24px;
            line-height: 1.25;
            color: #000;

            margin-bottom: 20px;
          }
          h6 {
            margin-bottom: 20px;
            height: 10px;
            span {
              float: left;
              font-size: 14px;
              line-height: 1.5;
              color: #bdbdbd;
            }
            .price {
              float: right;
              color: #d44d44;
              font-weight: 700;
              font-size: 16px;
              line-height: 20px;
              text-align: right;
            }
          }
        }
        /* 数量 */
        .count {
          display: flex;
          align-items: center;
          padding: 30px 0;
          border-bottom: 1px solid #ededee;
          .updown {
            padding: 0 20px;
            display: flex;
            align-items: center;
            input {
              display: block;
              width: 40px;
              height: 40px;
              background-color: #fff;
              line-height: 18px;
              font-size: 14px;
              padding: 0;
              color: #666;
              border: none;
              outline: none;
              text-align: center;
            }
            span {
              display: block;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              border: 3px solid #ededed;
              margin: 0 10px;
              text-align: center;
            }
          }
        }
      }
      /* 按钮 */
      .buy {
        padding: 30px 0;
        border-bottom: 1px solid #ededee;
        .cartbtn {
          width: 145px;
          height: 50px;
          line-height: 48px;
          border: 1px solid #5c81e3;
          border-radius: 4px;
          font-size: 12px;
          color: #fff;
          background-color: #678ee7;
          background-image: linear-gradient(180deg, #678ee7, #5078df);
        }
        .paybtn {
          width: 145px;
          height: 50px;
          line-height: 48px;
          margin-left: 10px;
          border: 1px solid #e1e1e1;
          border-radius: 4px;
          font-size: 12px;
          color: #646464;
          background-color: #f9f9f9;
          background-image: linear-gradient(180deg, #fff, #f9f9f9);
        }
      }
    }
  }
  .itemContainer {
    width: 1220px;
    margin: 20px auto 0;
    border-radius: 10px;
    background-color: #fff;
    /* 具体图片信息 */
    .itemInfo {
      position: relative;
      margin: 30px 0;
      overflow: hidden;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #dcdcdc;
      border-color: rgba(0, 0, 0, 0.14);
      box-shadow: 0 3px 8px -6px rgb(0 0 0 / 10%);
      .itemTitle {
        padding-left: 30px;
        position: relative;
        z-index: 10;
        height: 60px;
        padding: 0 10px 0 24px;
        border-bottom: 1px solid #d4d4d4;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
        background: #f3f3f3;
        background: linear-gradient(#fbfbfb, #ececec);
        line-height: 60px;
        font-size: 18px;
        color: #333;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: center;
        align-items: center;
      }
      .itemImg img {
        width: 1220px;
        height: 6879px;
      }
    }
  }
}
</style>
